<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>test scroll</title>
    <style>
        html,body,ul,li{
            height:100%;
            width: 100%;
            margin:0;
            padding:0;
        }
        div{
            box-sizing: border-box;
        }
        #container{
            height:300px;
            overflow: auto;
            border:1px solid green;
        }

        #outer{
            height:600px;
            width:80%;
            overflow: hidden;
            border:1px solid green;
        }
        #inner{
            height:1000px;
            width:100%;
            border:1px solid blue;
        }
        #inner>ul{
            list-style-type: none;
        }

        #inner>ul>li{
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            border:1px solid lightblue;
            font-size: 18px;
            font-weight: bold;
            line-height: 40px;

        }
    </style>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src="./requriejs/bower_components/requirejs/require.js"></script>
    <script>
        requirejs.config({
            paths: {
                'jquery': './jquery-1.11.0'
            }
        });
        require(['require',"./lib/console","./lib/fastclick","jquery"],function(require,_console,FastClick,$){
            debugger;
            /**
             *   规范是
             *   移动效果如下
             *   touchstart
             *   touchmove 多个
             *   touchend
             *  点击效果如下
             *  touchstart
             *  touchEnd
             *  诡异的android效果是
             *  android4.1 以及以下
                     *  移动效果是
                     *  touchstart
                     *  touchmove
                     *  没有touchend
                     *  点击效果是
                     *  touchstart
                     *  touchend
             *  神奇的android 4.2
             *  效果是标准效果
             *
             *  android 4.3 以及以上
             *       *  移动效果是
                     *  touchstart
                     *  touchmove
                     *  没有touchend
                     *  点击效果是
                     *  touchstart
                     *  touchend
             *
             *
             * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
             * 悲剧分割线
             * 在android上默认要在touchstart里面
             * 写上event.preventDefault();
             * 才能正常出发多次touchmove和touchend
             *
             *
             */


            $(function(){
                $('#outer').on('touchstart',function(event){
                    //event.preventDefault();
                    console.log('touchStart');
                });
                $('#outer').on('touchcancel',function(){
                    console.log('touchCancel');
                });
                $('#outer').on('touchmove',function(){
                    event.preventDefault();
                    console.log('touchMove');
                });
                $('#outer').on('touchend',function(){
                    console.log('touchEnd');
                }) ;

                $('#outer label').on('click',function(){
                    console.log('a 0000click');
                }) ;

            });
            FastClick.attach(document.body);
        });
    </script>

    <script src="./jquery-1.11.0.js"></script>
</head>
<body>

<div id="container">
    <div id="outer">
        <div id="inner">
            <ul>
                <li><a href="#"><label>baidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidu</label></a></li>
                <li><a href="#"><label>baidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidu</label></a></li>
                <li><a href="#"><label>baidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidu</label></a></li>
                <li><a href="#"><label>baidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidu</label></a></li>
            </ul>
            我是内容
        </div>
    </div>
</div>

</body>
</html>